<template>
  <div class="card">
    <div class="head">
      <van-nav-bar class="top-title" title="面试题">
        <template #left>
          <i
            class="iconfont iconbtn_nav_back backicon"
            @click="$router.go(-1)"
          ></i>
        </template>
        <template #right>
          <span @click="$refs.ques.show = true">答题卡</span>
        </template>
      </van-nav-bar>
      <!-- 题量title -->
      <div class="count">
        {{ questionList.length }}
      </div>
    </div>

    <div class="main" v-if="currentQ && currentQ.detail">
      <!-- 题体 -->
      <van-cell-group class="question">
        <van-cell class="the-ques">
          <template #title>
            <p style="font-size: 16px">
              <span>{{ currentQ.detail.type }}</span
              >{{ currentQ.detail.title }}
            </p>
          </template>
          <template #label>
            <span
              class="mylabel"
              v-for="(item, index) in currentQ.detail.tag"
              :key="index"
              >{{ item }}</span
            >
          </template>
        </van-cell>
      </van-cell-group>
      <!-- 选项 -->
      <!-- --------------单选------------------- -->
      <van-radio-group v-if="currentQ.detail.type === 1" v-model="single">
        <van-radio :class="checkQ('A')" name="A">
          {{ questionList[index].detail.option[0] }}
          <template #icon>
            A
          </template>
        </van-radio>

        <van-radio :class="checkQ('B')" name="B">
          {{ questionList[index].detail.option[1] }}
          <template #icon>
            B
          </template>
        </van-radio>

        <van-radio :class="checkQ('C')" name="C">
          {{ questionList[index].detail.option[2] }}
          <template #icon>
            C
          </template>
        </van-radio>

        <van-radio :class="checkQ('D')" name="D">
          {{ questionList[index].detail.option[3] }}
          <template #icon>
            D
          </template>
        </van-radio>
      </van-radio-group>
      <!-- --------------多选------------------- -->
      <van-checkbox-group v-if="currentQ.detail.type === 2" v-model="multiple">
        <van-checkbox :class="checkQ('A')" name="A">
          {{ questionList[index].detail.option[0] }}
          <template #icon>
            A
          </template>
        </van-checkbox>
        <van-checkbox :class="checkQ('B')" name="B">
          {{ questionList[index].detail.option[1] }}
          <template #icon>
            B
          </template>
        </van-checkbox>
        <van-checkbox :class="checkQ('C')" name="C">
          {{ questionList[index].detail.option[2] }}
          <template #icon>
            C
          </template>
        </van-checkbox>
        <van-checkbox :class="checkQ('D')" name="D">
          {{ questionList[index].detail.option[3] }}
          <template #icon>
            D
          </template>
        </van-checkbox>
      </van-checkbox-group>
      <!-- --------------简答------------------- -->
      <van-cell-group v-if="currentQ.detail.type === 3">
        <van-field v-model="shorts" type="textarea" placeholder="简答内容" />
      </van-cell-group>
      <!-- 答案解析 -->
      <div v-if="currentQ.result" class="analysis">
        <h5 style="margin: 15px 0">答案解析</h5>
        <div
          style="color: rgb(29, 199, 121); font-size: 18px; margin-bottom: 15px"
          class="correct"
        >
          正确答案:
          <span
            style="color: rgb(29, 199, 121); font-size: 18px"
            v-for="(item, index) in currentQ.detail.type === 1
              ? currentQ.result.singleAnswer
              : currentQ.result.multipleAnswer"
            :key="index"
            >{{ item }}
          </span>
        </div>
        <div class="difficulty">
          <span>难度: {{ diff }}</span>
          <span>提交次数: {{ currentQ.result.submitNum }}</span>
          <span>正确次数: {{ currentQ.result.correctNum }}</span>
        </div>
        <p class="explain">
          {{ currentQ.result.answerAnalysis }}
        </p>
      </div>
    </div>
    <!-- 底部 -->
    <div class="footer">
      <div class="icon">
        <div class="left">
          <i class="iconfont iconbtn_shoucang_nor"></i>
          <p>收藏</p>
        </div>
        <div class="right">
          <i class="iconfont iconbtn_shuati_fankui"></i>
          <p @click="$refs.back.show = true">反馈</p>
        </div>
      </div>
      <div class="footer-count">
        <span style="color: rgb(209, 45, 62); font-size: 24px">{{
          index + 1
        }}</span
        >/77题
      </div>
      <div class="btn">
        <van-button
          @click="toNext"
          v-if="currentQ && currentQ.result"
          class="btn"
          type="info"
          >下一题</van-button
        >
        <van-button
          :disabled="changeBtn"
          class="btn"
          v-else
          @click="submitQ"
          type="danger"
          >提交</van-button
        >
      </div>
    </div>
    <!-- 弹出卡 -->
    <quesId
      ref="ques"
      @changeQ="changeQ"
      :questionList="questionList"
      :index="index"
    ></quesId>
    <!-- 反馈框 -->
    <feedBack ref="back"></feedBack>
  </div>
</template>

<script>
import {
  getQuestions,
  cheangeQues,
  nextQ
  // toCollect
} from '@/api/subject/region.js'
export default {
  components: {
    quesId: () => import('./quesId'),
    feedBack: () => import('./feedback')
  },
  created () {
    this.questions()
    console.log(this.currentQ)
  },
  computed: {
    // 当前 问题
    currentQ: function () {
      return this.questionList[this.index] || {}
    },
    // 判断 按钮
    changeBtn () {
      if (!this.questionList[this.index]) {
        return false
      }
      if (!this.questionList[this.index].detail) {
        return false
      }
      if (this.questionList[this.index].detail.type === 1) {
        return !this.single
      }
      if (this.questionList[this.index].detail.type === 2) {
        return this.multiple.length === 0
      }
      return true
    },
    // 判断 选答案 并 传递 背景色
    checkQ () {
      return op => {
        if (!this.currentQ.result) {
          return ''
        }
        if (this.currentQ.detail.type === 1) {
          if (this.currentQ.result.singleAnswer === op) {
            return 'right'
          }
          if (this.currentQ.result.singleAnswer !== op && this.single === op) {
            return 'error'
          }
        }
        if (this.currentQ.detail.type === 2) {
          if (this.currentQ.result.multipleAnswer.includes(op)) {
            return 'right'
          }
          if (
            !this.currentQ.result.multipleAnswer.includes(op) &&
            this.multiple.includes(op)
          ) {
            return 'error'
          }
        }
      }
    },
    // 难度
    diff () {
      if (this.currentQ.result.diffculty === 1) {
        return '简单'
      } else if (this.currentQ.result.diffculty === 2) {
        return '中等'
      } else {
        return '困难'
      }
    }
  },
  data () {
    return {
      radio: '',
      submit: true,
      single: '',
      multiple: [],
      shorts: '',
      index: 0,
      questionList: []
    }
  },
  methods: {
    async questions () {
      const res = await getQuestions(
        this.$route.query.type,
        this.$route.query.city
      )
      this.questionList = res.data
      console.log(res)
    },
    async submitQ () {
      console.log(this.questionList[this.index].id)
      const res = await nextQ({
        id: this.questionList[this.index].id,
        singleAnswer: this.single,
        multipleAnswer: this.multiple
      })
      this.$set(this.questionList[this.index], 'result', res.data)
      console.log(res)
    },
    async toNext () {
      const res = await cheangeQues(this.questionList[this.index++].id)
      this.$set(this.questionList[this.index], 'detail', res.data)
    },
    async changeQ (index) {
      this.index = index
      const res = await cheangeQues(this.questionList[index].id)
      this.$set(this.questionList[index], 'detail', res.data)
    }
  }
}
</script>

<style lang="less" scoped>
.card {
  .head {
    position: fixed;
    top: 0;
    z-index: 999;
    width: 100%;
    .backicon {
      font-size: 48px !important;
      margin-left: -20px;
    }
    .top-title {
      box-shadow: 0 15px 5px -10px rgba(0, 0, 0, 0.1);
    }
    .count {
      position: absolute;
      top: 8px;
      z-index: 99999;
      left: 213px;
      height: 20px;
      width: 60px;
      color: rgb(133, 126, 126);
      font-size: 12px;
    }
  }
  .main {
    // 公共 样式
    .border {
      border: 2px solid rgb(189, 183, 183);
      border-radius: 5px;
    }
    .bgc-g {
      background-color: rgba(130, 241, 56, 0.2);
      border: 2px solid rgb(189, 183, 183);
      border-radius: 5px;
    }
    .bgc-r {
      background-color: rgba(243, 109, 92, 0.2);
      border: 2px solid rgb(189, 183, 183);
      border-radius: 5px;
    }
    .red {
      color: rgba(240, 64, 11, 0.5);
    }
    .green {
      color: rgba(10, 97, 10, 0.5);
    }
    // 主要样式
    padding: 0 15px;
    margin-top: 66px;
    .question {
      margin-top: 20px;
      .van-cell__title {
        span {
          font-size: 16px;
          padding: 0 6px;
          margin-right: 10px;
        }
        .mylabel {
          font-size: 12px;
          background-color: rgb(235, 225, 225);
        }
        .van-cell__label {
          margin-top: 15px;
        }
      }
    }

    .the-ques {
      padding: 10px 0;
    }
    .van-radio {
      font-size: 14px;
      border: 1px solid #ccc;
      border-radius: 5px;
      margin-bottom: 5px;
      padding: 10px 5px;
    }

    .van-radio[aria-checked='true'] {
      border: 2px solid red;
    }
    .difficulty {
      display: flex;
      justify-content: space-between;
      padding: 10px;
      font-size: 12px;
      font-weight: 200;
      background-color: rgb(247, 244, 245);
      margin-bottom: 20px;
    }
    .explain {
      font-size: 16px;
    }
    /deep/.van-field__control {
      background-color: rgb(245, 237, 237);
      border-radius: 10px;
      height: 200px;
    }
    .right {
      background-color: rgb(102, 240, 132);
    }
    .error {
      background-color: rgb(224, 89, 36);
    }
  }
  /deep/.van-checkbox {
    font-size: 14px;

    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 15px 5px;
    margin-bottom: 10px;
  }
  /deep/.van-checkbox[aria-checked='true'] {
    border: 2px solid red;
    border-radius: 5px;
  }
  .footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    bottom: 0;
    height: 85px;
    width: 100%;
    background-color: #fff;
    padding-right: 15px;
    .icon {
      display: flex;
      justify-content: space-around;
      width: 100px;
      color: rgb(163, 159, 160);
      i {
        font-size: 24px;
        margin-left: 3px;
      }
      p {
        font-size: 14px;
      }
    }
    .btn {
      height: 40px;
      width: 100px;
      border-radius: 5px;
    }
    .footer-count {
      font-size: 14px;
      margin-top: -5px;
    }
  }
}
</style>
